<template>
  <div>
    <el-row class="flex">
      <el-form-item label="类型" prop="menuType">
        <el-radio-group v-model="state.data.menuType">
          <el-radio value="1">菜单</el-radio>
          <el-radio value="0">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-row>

    <el-row class="flex">
      <el-form-item label="上级菜单" prop="parentId" class="flex1">
        <el-tree-select
          v-model="state.data.parentId"
          :data="treeDataModel"
          :render-after-expand="false"
          :props="{ value: 'id', label: 'name', children: 'children' }"
          class="w100"
          check-strictly
          placeholder="请选择上级菜单"
        />
      </el-form-item>
    </el-row>

    <el-row class="flex">
      <el-form-item label="菜单名称" prop="name" class="flex1">
        <el-input v-model="state.data.name" placeholder="请输入菜单名称" />
      </el-form-item>
    </el-row>

    <el-row class="flex" v-if="state.data.menuType === '0'">
      <el-form-item label="授权标识" prop="permission" class="flex1">
        <el-input v-model="state.data.permission" placeholder="请输入授权标识" />
      </el-form-item>
    </el-row>

    <el-row class="flex" v-if="state.data.menuType === '1'">
      <el-form-item label="路由" prop="path" class="flex1">
        <el-input v-model="state.data.path" placeholder="请输入菜单路由" />
      </el-form-item>
    </el-row>

    <el-row class="flex" v-if="state.data.menuType === '1'">
      <el-form-item label="排序" prop="sortOrder" class="flex1">
        <el-input v-model="state.data.sortOrder" type="number" placeholder="请输入排序" />
      </el-form-item>
    </el-row>

    <el-row class="flex" v-if="state.data.menuType === '1'">
      <el-form-item label="图标" prop="icon" class="flex1">
        <el-input v-model="state.data.icon" placeholder="请输入图标" />
      </el-form-item>
    </el-row>

    <el-row class="flex" v-if="state.data.menuType === '1'">
      <el-form-item label="缓存" prop="keepAlive">
        <el-radio-group v-model="state.data.keepAlive">
          <el-radio value="1">是</el-radio>
          <el-radio value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示" prop="visible">
        <el-radio-group v-model="state.data.visible">
          <el-radio value="1">是</el-radio>
          <el-radio value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { reactive, watch } from 'vue'
  import type { IMenuFormData, IMenuEntity } from '../config'

  const model = defineModel<IMenuFormData>({ required: true })

  const treeDataModel = defineModel<IMenuEntity[]>('treeData', { required: true })

  const state = reactive({
    data: model.value
  })

  watch(
    () => state.data,
    () => {
      model.value = state.data
    }
  )
</script>

<style scoped></style>
